<div class="container p-2 mx-auto sm:p-4" [ngClass]="['text' + defaultInv]">
	<h2 class="mb-4 text-2xl font-semibold leading-tight">Emails</h2>
	<div class="flex flex-col overflow-x-auto text-xs">
		<div class="flex text-left" [ngClass]="['bg' + neutral]">
			<div class="flex items-center justify-center w-8 px-2 py-3 sm:p-3">
				<input
					type="checkbox"
					name="All"
					class="w-3 h-3 rounded-sm"
					[ngClass]="['accent' + primary]"
				/>
			</div>
			<div class="w-32 px-2 py-3 sm:p-3">Sender</div>
			<div class="flex-1 px-2 py-3 sm:p-3">Message</div>
			<div class="hidden w-24 px-2 py-3 text-right sm:p-3 sm:block">Received</div>
		</div>
		<div
			*ngFor="let row of rows; let i = index"
			class="flex border-b border-opacity-20"
			[ngClass]="['border' + neutral, 'bg' + contrast]"
		>
			<div class="flex items-center justify-center w-8 px-2 py-3 sm:p-3">
				<input
					type="checkbox"
					name="{{ 'Box' + i }}"
					class="w-3 h-3 rounded-sm"
					[ngClass]="['accent' + primary]"
				/>
			</div>
			<div class="w-32 px-2 py-3 sm:p-3">
				<p>{{ row.name }}</p>
			</div>
			<div class="flex-1 block px-2 py-3 truncate sm:p-3 sm:w-auto">
				{{ row.message }}
			</div>
			<div
				class="hidden w-24 px-2 py-3 text-right sm:p-3 sm:block"
				[ngClass]="['text' + plainInv]"
			>
				<p>{{ row.date }}</p>
			</div>
		</div>
	</div>
</div>
